<!--
 * @Description: 
 * @Author: lwx
 * @Date: 2022-11-09 11:18:36
 * @LastEditors: lwx
 * @LastEditTime: 2023-04-12 11:18:46
-->
<template>
<!-- 设备维修页面 -->
  <div class="fillcontain">
    <el-card class="box-card">
      <!-- 设备信息 -->
      <div class="fontWeight green">设备信息</div>
      <div class="device-info">
         <div class="panel-item">
            <span class="label">设备号</span>
            <span>{{deviceInfo.machine_no}}</span>
         </div>
         <div class="panel-item">
            <span class="label">设备名称</span>
            <span>{{deviceInfo.name}}</span>
         </div>
         <div class="panel-item">
            <span class="label">当前设备状态</span>
            <span>{{deviceInfo.enable === true?'启用':'禁用'}}</span>
         </div>
         <div class="panel-item mt-3">
            <span class="label">设备类型</span>
            <span>{{deviceInfo.machine_kind}}</span>
         </div>
         <div class="panel-item mt-3">
            <span class="label">维修员</span>
            <span>{{username}}</span>
         </div>
         <div class="panel-item mt-3">
            <span class="label">工位</span>
            <span>{{deviceInfo.station_name}}</span>
         </div>
      </div>
      <el-button type="success" class="my-4" @click="startRepair">开始维修</el-button>
      <!-- 维修信息 -->
      <div class="fontWeight green">维修信息</div>
      <el-form
        ref="serviceForm"
        :model="serviceForm"
        :rules="serviceForm_rules"
        label-width="110px" 
        class="mt-4">
        <el-form-item prop="note" label="故障描述：">
          <el-input type="textarea" v-model="serviceForm.note"></el-input>
        </el-form-item>
        <el-form-item prop="results" label="维修结果：">
          <el-input type="textarea" v-model="serviceForm.results"></el-input>
        </el-form-item>
      </el-form>
        <!-- 维修图片 -->
      <div class="fontWeight green mt-4">维修图片</div>
      <div class="my-4">
        <el-upload
          action="#"
          accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
          list-type="picture-card"
          :auto-upload="false"
          :limit="1"
          :class="{hide:hideUpload}"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-change="changeImage"
          :on-exceed="handleExceed">
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>   
     <div class="mt-4">
       <el-button type="success" @click="finishRepair">结束维修</el-button>
     </div>
    </el-card>
  </div>
</template>

<script>
import {deviceMaintain,searchMaintain} from '@/api/maintain.js'
import {formatTime} from '@/utils'
export default {
  data () {
    return {
     deviceInfo:{},
     serviceForm:{
      operate:'',
      remind:'',
      note:'',
      results:''
     },
     serviceForm_rules:{
       note:[{required:true, message: "请填写故障原因",trigger: "blur",}],
       results:[{required:true, message: "请填写维修结果",trigger: "blur",}]
     },
      file:'',
      dialogImageUrl: '',
      dialogVisible: false,
      hideUpload:false,
    }
  },
   computed: {
     username() {
      return this.$store.getters.username
    },
   },
   created(){
    if(this.$route.query.row){ 
      this.deviceInfo=JSON.parse(this.$route.query.row)
      this.searchHistory()
    }
   },
   methods:{
    async searchHistory(){
     const res = await searchMaintain(this.deviceInfo.facility_id)
     if(res.have_data===true){
      this.serviceForm.operate=res.data.operate
     }
    },
    //预览图片
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    //上传
    async changeImage(file, fileList){
       this.file=file.raw
       this.hideUpload=true
    },
    //移除
    handleRemove(file){
      this.file=null
      this.hideUpload=false
    },
    //开始维修 记下时间
   async startRepair(){
       if(this.serviceForm.operate!==''){
        this.$message.warning('已经记录过开始维修时间！')
        return
       }
       this.serviceForm.operate = formatTime(new Date(), "yyyy-MM-dd");
       const formDatas = new FormData(); 
       formDatas.append("facility_id", this.deviceInfo.facility_id)
       formDatas.append("operate", this.serviceForm.operate)
       formDatas.append("is_maintain", 1)
       await deviceMaintain(formDatas)
       this.$message.success('开始维修，记录成功！')
    },
    //结束维修
    finishRepair(){
      this.serviceForm.remind = formatTime(new Date(), "yyyy-MM-dd");
       const formDatas = new FormData(); 
      if (this.file) {
        formDatas.append("image", this.file); //把文件实体添加到表单对象
      }
       this.$refs.serviceForm.validate((async valid=>{
         if(valid){
           if(this.serviceForm.operate===''){
            return this.$message.warning('缺少开始维修时间！')
           }
           formDatas.append("facility_id", this.deviceInfo.facility_id)
           formDatas.append("note", this.serviceForm.note)
           formDatas.append("results", this.serviceForm.results)
           formDatas.append("operate", this.serviceForm.operate)
           formDatas.append("remind", this.serviceForm.remind)
           formDatas.append("is_maintain", 1)
           await deviceMaintain(formDatas)
           this.$alert('记录成功，是否关闭当前页面？', '提交成功', {
               confirmButtonText: '关闭',
               type:'success',
               callback:action=>{
                this.$store.dispatch("delView", this.$route);
                this.$router.push({path:'/dev/list'})
               }
             }) 
         }
      }))
    },
    //超出限制个数钩子
      handleExceed() {
      this.$message.warning("当前限制只能上传一张图片！");
    },
   }

}
</script>
<style lang='scss' scoped>
/deep/.el-card__body{
    padding: 25px 30px;
    font-size:17px
}
/deep/.el-form-item__label{
    font-size: 16px;
    font-weight: 600;
    color:#909399;
}

.device-info{
    display: flex;
    flex-wrap: wrap;
    background: #F7F7F8;
    margin-top: 20px;
    padding: 20px;
    border-radius: 5px;
    font-size: 16px
}
.panel-item{
   display: flex;
   width:33.3%
}
.label{
  font-weight: 600;
  color:#909399 ;
  margin-right: 25px;
}
.el-button--success {
    background-color: #42b983;
    border-color: #42b983;
}

.el-button--success.is-active,
.el-button--success:active {
    background: #47bd88;
    border-color: #47bd88;
    color: #fff;
}

.el-button--success:focus,
.el-button--success:hover {
    background: #6edaad;
    border-color: #6edaad;
    color: #fff;
}
</style>